require('./PageAqxcjledit.styl');

import {is} from 'immutable'
import {PropTypes} from "prop-types";
import reactMixin from 'react-mixin';
import Store from './store';
import Reflux from 'reflux';
import Actions from './actions'
import {xxjdArray} from './../../contas/contas.js';
import {Boxs, Button, CheckboxField, DatetimeField,SelectField, Field, Group, Popup, TextareaField, Toast} from 'saltui';
import SelectEngs from './../engselect';
import {Control} from 'react-keeper'
import Jdry from './../../components/jdry';
import DMap from './../../components/map';
import Imgup from './../../components/imgup';
import {Component} from "react";

class Page extends Component {

  constructor(props) {
    super(props);
    this.onJdryAdd = this.onJdryAdd.bind(this);
    this.onJdryDel = this.onJdryDel.bind(this);
    this.onMapSelect = this.onMapSelect.bind(this);
    this.onEngSelectClick = this.onEngSelectClick.bind(this);
    this.onImgSelect = this.onImgSelect.bind(this);
    this.onImgDel = this.onImgDel.bind(this);
    this.onAqxcjlAddClick = this.onAqxcjlAddClick.bind(this);
    this.onXxjdmsChange = this.onXxjdmsChange.bind(this);
    this.onXxjdChange = this.onXxjdChange.bind(this);
    this.onJdyjChange = this.onJdyjChange.bind(this);
    this.onZrztChange = this.onZrztChange.bind(this);
  }

  onAqxcjlAddClick() {

    if (!this.state.aqxcjl.aqxcjl.getIn(['eng', 'engName'])) {
      Toast.show({
        type: 'error',
        content: '请选择工程!',
        onHide: function () {
        }
      });
      return;
    }
    if (!this.state.aqxcjl.aqxcjl.getIn(['map', 'latitude'])) {

      Toast.show({
        type: 'error',
        content: '请获取位置!',
        onHide: function () {

        }
      });
      return;
    }
    if (this.state.aqxcjl.aqxcjl.get('jdrys').size == 0) {

      Toast.show({
        type: 'error',
        content: '请选择监督人员!',
        onHide: function () {

        }
      });
      return;
    }
    Actions.saveAqxcjl(this, this.addCallBack);
  }

  addCallBack(t) {
    Control.go(-1);
  }

  //选择工程
  onEngSelectClick() {
    Popup.show(
      <div className="popup-container">
        <SelectEngs onEngClick={this.onEngClick.bind(this)}/>
        <div>
          <Button type="primary" display="banner" onClick={() => {
            Popup.hide();
          }}>关闭</Button> <br/>
        </div>
      </div>, {
        animationType: 'slide-down',
      });

  }

  onEngClick(obj) {
    Actions.selectEng(obj);
    Popup.hide();
  }

  //上传图片
  onImgSelect(obj) {
    Actions.addImage(obj);
  }

  //删除图片
  onImgDel(obj) {
    Actions.delImage(obj);
  }

  //选择记录日期
  onJlrqSelect(filed, value) {
    Actions.selectJlrq({jlrq: value});
  }

  //选择责任主体
  onZrztChange(obj) {
    Actions.selectZrzt(obj);
  }

  //定位地图
  onMapSelect(map) {
    Actions.selectMap(map);
  }

  //添加监督人员
  onJdryAdd(jdry) {
    Actions.addJdry(jdry);
  }

  //监督意见
  onJdyjChange(obj) {
    Actions.changeJdyj(obj);
/*    this.setState({
      aqxcjl: this.state.aqxcjl.aqxcjl.set('jdyj', obj)
    });*/
  }

  //监督意见失去焦点事件
  onJdyjBlur(e) {
   // Actions.changeJdyj(e.target.value);
  }

  //添加问题描述
  onWtmsChange(index) {
    Actions.changeWtms({
      index: index,
      wtms: event.target.value
    });
  }

  //删除监督人员
  onJdryDel(jdryIndex) {
    Actions.delJdry(jdryIndex);
  }

  onXxjdmsChange(obj) {
    Actions.selectXxjdms(obj);
  }

  onXxjdChange(obj){
    Actions.selectXxjdA(obj);
  }

  render() {
    let t = this;
    let wts = [];

    this.state.aqxcjl.aqxcjl.has('wt') && this.state.aqxcjl.aqxcjl.get('wt').map((item, index) => {
      wts.push(
        <Group.List>
          <TextareaField label={item.get('wt')} minRows={3} maxRows={7} key={index}
                         onChange={(e) => this.onWtmsChange(index, e)}
                         readOnly={this.state.aqxcjl.readOnly}
                         value={item.get('wtms')}
                         placeholder={this.state.aqxcjl.readOnly ? '' : '请输入文字'}
          />

        </Group.List>
      );
    });

    return (
      <div className="aqxcjledit">
        <Group>
          <Group.Head>
            基本信息
          </Group.Head>
          <Group.List>
            <Field layout="h" label="记录编号" required={true}>
              {this.state.aqxcjl.aqxcjl.get('coding') ? <div>{this.state.aqxcjl.aqxcjl.get('coding')}</div> :
                <div style={{fontSize: '16px', color: '#ccc'}}>此编号自动生成</div>}
            </Field>
          </Group.List>

          <Group.List>
            {!this.state.aqxcjl.readOnly ?
              <Field layout="h" label="监督工程" required={true}
                     icon={{name: 'angle-right', fill: '#ccc', width: 26, height: 26, onClick: this.onEngSelectClick}}>
                {!this.state.aqxcjl.aqxcjl.has('eng') || !this.state.aqxcjl.aqxcjl.get('eng').has('engName') ?
                  <div style={{fontSize: '16px', color: '#ccc', textAlign: 'right'}}
                       onClick={this.onEngSelectClick}>请选择</div>
                  : <div style={{fontSize: '16px'}}
                         onClick={this.onEngSelectClick}>{this.state.aqxcjl.aqxcjl.get('eng').get('engName')}</div>}</Field>

              : <Field layout="h" label="监督工程" required={true}>
                <div style={{fontSize: '16px'}}>
                  {this.state.aqxcjl.aqxcjl.get('eng').get('engName')}</div>
              </Field>
            }
          </Group.List>

          <Group.List>

            {!this.state.aqxcjl.readOnly ?

              <SelectField
                label="形象进度"
                options={xxjdArray}
                onSelect={this.onXxjdChange}
                value={this.state.aqxcjl.xxjda}
              />
              : <TextareaField label="形象进度" minRows={1} maxRows={5}
                               readOnly={this.state.aqxcjl.readOnly}
                               value={this.state.aqxcjl.aqxcjl.get('xxjd')}
                               placeholder={this.state.aqxcjl.readOnly ? '' : '请输入文字'}
              />
            }
          </Group.List>
          <Group.List>
            <TextareaField label="进度描述" minRows={2} maxRows={3}
                           onChange={this.onXxjdmsChange}
                           readOnly={this.state.aqxcjl.readOnly} required={true}
                           value={this.state.aqxcjl.aqxcjl.get('xxjdms')}
                           placeholder={this.state.aqxcjl.readOnly ? '' : '请输入文字'}
            />

          </Group.List>
{/*          <Group.List>

            {!this.state.aqxcjl.readOnly ?
              <CheckboxField label="形象进度" data={this.state.aqxcjl.xxjd} onChange={this.onXxjdmsChange}
                             placeholder={this.state.aqxcjl.readOnly ? '' : '请选择'}
                             maskCloseable={true}
                             groupListArgument={{lineIndent: 15, itemIndent: 15}}
                             mode="slot" required={true}/>

              : <TextareaField label="形象进度" minRows={1} maxRows={5}
                               readOnly={this.state.aqxcjl.readOnly}
                               value={this.state.aqxcjl.aqxcjl.get('xxjdms')}
                               placeholder={this.state.aqxcjl.readOnly ? '' : '请输入文字'}
              />
            }

          </Group.List>*/}
          <Group.List>
            <DatetimeField label="记录时间" layout="v"
                           placeholder={this.state.aqxcjl.readOnly ? '' : '请选择'}
                           required={true}
                           readOnly={this.state.aqxcjl.readOnly}
                           onSelect={
                             this.onJlrqSelect.bind(this, 'value')}
                           value={this.state.aqxcjl.jlrq} columns={DatetimeField.YMD}/>
          </Group.List>
          {
            this.state.aqxcjl.zrzt.length > 0 &&
            <Group.List>
              <CheckboxField label="责任主体" data={this.state.aqxcjl.zrzt} onChange={this.onZrztChange}
                             readOnly={this.state.aqxcjl.readOnly}
                             placeholder={this.state.aqxcjl.readOnly ? '' : '请选择'}
                             maskCloseable={true}
                             groupListArgument={{lineIndent: 15, itemIndent: 15}}
                             mode="list" required={false}/>
            </Group.List>
          }

          {wts}

          <Group.List>
            <TextareaField label="检查结果评价及处理意见" minRows={3} maxRows={7}
                           onChange={this.onJdyjChange}
                           onBlur={this.onJdyjBlur}
                           readOnly={this.state.aqxcjl.readOnly} required={true}
                           value={this.state.aqxcjl.aqxcjl.get('jdyj')}
                           placeholder={this.state.aqxcjl.readOnly ? '' : '请输入文字'}
            />
          </Group.List>

          <div className="form-jg"/>

          <Group.List>
            <Imgup images={
              this.state.aqxcjl.aqxcjl.has('images') && this.state.aqxcjl.aqxcjl.get('images').toJS()}
                   onImgSelect={this.onImgSelect} index={0}
                   readOnly={this.state.aqxcjl.readOnly}
                   onImgDel={this.onImgDel}/>
          </Group.List>

          <div className="form-jg"/>

          <Group.List>
            <Group.Head>
              <DMap map={this.state.aqxcjl.aqxcjl.has('map') && this.state.aqxcjl.aqxcjl.get('map').toJS()}
                    onMapSelect={this.onMapSelect} readOnly={this.state.aqxcjl.readOnly}/>
            </Group.Head>
          </Group.List>

          <div className="form-jg"/>

          <Jdry jdrys={this.state.aqxcjl.aqxcjl.has('jdrys') && this.state.aqxcjl.aqxcjl.get('jdrys').toJS()}
                readOnly={this.state.aqxcjl.readOnly}
                onJdryAdd={this.onJdryAdd} onJdryDel={this.onJdryDel}/>

          {!this.state.aqxcjl.readOnly ?
            <Button style={{margin: '10px'}} type="primary"
                    onClick={this.onAqxcjlAddClick}>提交</Button>
            : <Button style={{margin: '10px'}} type="primary"
                      onClick={() => {
                        Control.go(-1)
                      }
                      }>关闭</Button>
          }
        </Group>

      </div>
    );
  }


  notice() {
    dd.device.notification.alert({
      title: "提示",
      message: "敬请期待",
      buttonName: "确定",
      onSuccess: function (data) {
      },
      onFail: function (err) {
      }
    });
  }


  componentWillMount() {
    let t = this;

    Actions.operAqxcjl({
      spId: this.props.params.spId,
      operType: this.props.params.operType,
    });


    dd.biz.navigation.setTitle({
      title: '安全监督巡查记录',//控制标题文本，空字符串表示显示默认文本
      onSuccess: function (result) {
        console.log(result);
      },
      onFail: function (err) {
        console.log(err);
        alert("调用钉钉设置导航接口错误:" + JSON.stringify(err));
      }
    });


    dd.biz.navigation.setRight({
      show: true,//控制按钮显示， true 显示， false 隐藏， 默认true
      control: true,//是否控制点击事件，true 控制，false 不控制， 默认false
      text: '更多',//控制显示文本，空字符串表示显示默认文本
      onSuccess: function (result) {

        if (t.state.aqxcjl.operType == 'edit') {
          if (t.state.aqxcjl.readOnly) {
            dd.device.notification.actionSheet({
              title: "请选择", //标题
              cancelButton: '取消', //取消按钮文本
              otherButtons: ["分享"],
              onSuccess: function (result) {
                switch (result.buttonIndex) {
                  case  0 :
                    t.notice();
                    break;
                  default:
                    break;
                }

                //onSuccess将在点击button之后回调
                /*{
                 buttonIndex: 0 //被点击按钮的索引值，Number，从0开始, 取消按钮为-1
                 }*/
              },
              onFail: function (err) {
              }
            })
          } else {
            dd.device.notification.actionSheet({
              title: "请选择", //标题
              cancelButton: '取消', //取消按钮文本
              otherButtons: ["上传", "分享", "删除"],
              onSuccess: function (result) {
                switch (result.buttonIndex) {
                  case  0 :
                    Toast.show({
                      type: 'loading',
                      content: '上传中...',
                      autoHide: false,
                      hasMask: true,
                    });
                    Actions.upAqxcjl(t, t.addCallBack);
                    break;
                  case  1 :
                    t.notice();
                    break;
                  case  2 :
                    Toast.show({
                      type: 'loading',
                      content: '删除中...',
                      autoHide: false,
                      hasMask: true,
                    });
                    Actions.delAqxcjl(t, t.addCallBack);
                    break;
                  default:
                    break;
                }
              },
              onFail: function (err) {
              }
            })
          }
        }
        if (t.state.aqxcjl.operType == 'add') {
          dd.device.notification.actionSheet({
            title: "请选择", //标题
            cancelButton: '取消', //取消按钮文本
            otherButtons: ["重置"],
            onSuccess: function (result) {
              switch (result.buttonIndex) {
                case  0 :
                  Toast.show({
                    type: 'loading',
                    content: '上传中...',
                    autoHide: false,
                    hasMask: true,
                  });
                  Actions.reflushAqxcjl();
                  break;
                default:
                  break;
              }
            },
            onFail: function (err) {
            }
          })

        }
      },
      onFail: function (err) {
        console.log(err);
        alert("调用钉钉接口错误:" + JSON.stringify(err));
      }
    });


  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.aqxcjl || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }
}

Page.contextTypes = {
  router: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
};

reactMixin.onClass(Page, Reflux.connect(Store, "aqxcjl"));

export default Page;
